<template>
  <div>
    <customSearch
      ref="customSearch"
      placeholder="请输入姓名"
      title="人员列表"
      :total="total"
      :is-super-search="active !== '涉火作业人员'"
      @search="handleSearch"
      @superSearch="openSuperSearch"
    />
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1
        class="mb-1 w-100"
        :list="list"
        :value="activeIndex"
        is-scroll
        @change="tagChange"
      />
    </div>
    <div>
      <div v-if="listData.length > 0" class="common_list">
        <div
          v-for="(item, index) in listData"
          :key="index"
          class="list_item"
          @click="goToDetails(item)"
        >
          <div class="content_area">
            <!--            <img src="@/assets/images/ryicon.png">-->
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.userName || item.managerName }}
                <span v-if="item.jobTitle!=='/' || item.professionTypeName!=='/'" style="white-space: nowrap;">
                  {{ active==='安全管理人员' ? item.jobTitle : item.professionTypeName }}
                </span>
                <!--                <van-tag v-if="(active === '专家库' || active === '安全管理人员') && item.jobTitle" plain type="primary" style="min-width: 92px; display: block;text-align: center">{{ item.jobTitle }}</van-tag>-->
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe725;</i>
                  <div class="label">工作单位：</div>
                  <div class="value">
                    {{ item.workUnit ? item.workUnit : "/" }}
                  </div>
                </li>
                <template v-if="active === '专家库'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">属性类别：</div>
                    <div class="value">
                      {{
                        item.expertAttributeList
                          ? item.expertAttributeList
                            .map((val) => val.expertattributename)
                            .join(",")
                          : ""
                      }}
                    </div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe664;</i>
                    <div class="label">专业类别：</div>
                    <div class="value">{{ item.professionTypeName }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe6a2;</i>
                    <div class="label">受聘状态：</div>
                    <div class="value">{{ item.employState }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe6a2;</i>
                    <div class="label">性别：</div>
                    <div class="value">{{ item.sex }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe6a2;</i>
                    <div class="label">年龄：</div>
                    <div class="value">{{ item.age }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color7">&#xe6a2;</i>
                    <div class="label">职称：</div>
                    <div class="value">{{ item.jobTitle }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color1">&#xe6a2;</i>
                    <div class="label">从事安全生产相关工作年限：</div>
                    <div class="value">{{ item.workLife }}</div>
                  </li>
                  <!-- <li>
                    <i class="iconfont c-text-color5">&#xe612;</i>
                    <div class="label">职务：</div>
                    <div class="value">{{ item.jobTitle }}</div>
                  </li> -->
                </template>
                <template v-else-if="active === '安全管理人员'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe612;</i>
                    <div class="label">学历：</div>
                    <div class="value">{{ item.educationLevel }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe8d5;</i>
                    <div class="label">从事安全生产相关工作年限：</div>
                    <div class="value">{{ item.workLife }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe607;</i>
                    <div class="label">是否加入专家库：</div>
                    <div class="value">{{ item.isExpert }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe634;</i>
                    <div class="label">注册安全工程师证书：</div>
                    <div class="value">
                      {{ item.isSafetyCertify
                      }}{{
                        item.safetyCertifyLevelName !== '/'
                          ? `（${item.safetyCertifyLevelName}）`
                          : ""
                      }}
                    </div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe664;</i>
                    <div class="label">专职/兼职：</div>
                    <div class="value">{{ item.partFull }}</div>
                  </li>
                </template>
                <template v-else-if="active === '特种作业人员'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">作业类别：</div>
                    <div class="value">{{ item.jobCategory }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe612;</i>
                    <div class="label">学历：</div>
                    <div class="value">{{ item.educationLevel }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe8d5;</i>
                    <div class="label">从事安全生产相关工作年限：</div>
                    <div class="value">{{ item.workLife }}</div>
                  </li>
                </template>
                <template v-else-if="active === '特种设备作业/管理人员'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">作业项目：</div>
                    <div class="value">{{ item.jobCategory }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe612;</i>
                    <div class="label">学历：</div>
                    <div class="value">{{ item.educationLevel }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe8d5;</i>
                    <div class="label">从事安全生产相关工作年限：</div>
                    <div class="value">{{ item.workLife }}</div>
                  </li>
                </template>
                <template v-else-if="active === '涉火作业人员'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">车间：</div>
                    <div class="value">{{ item.workPlace }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe664;</i>
                    <div class="label">岗位：</div>
                    <div class="value">{{ item.workPost }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe612;</i>
                    <div class="label">学历：</div>
                    <div class="value">{{ item.educationLevel }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe8d5;</i>
                    <div class="label">从事安全生产相关工作年限：</div>
                    <div class="value">{{ item.workLife }}</div>
                  </li>
                </template>
                <li v-if="active === '安全管理人员'">
                  <i class="iconfont c-text-color2">&#xe6bb;</i>
                  <div class="label">所学专业：</div>
                  <div class="value">{{ item.specialityType }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore
        ref="customLoadmore"
        :page-num="form.pageNum"
        :pages="pages"
        @load="handlePages"
      />
    </div>
    <van-popup
      v-model="superSearch"
      position="right"
      :style="{ width: '90%', height: '100%' }"
      lock-scroll
      close-on-popstate
      closeable
      class="custom-van-pop"
    >
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="active === '专家库'">
            <custom-timer type="year" title="年份" :is-interval="false" :picker-title="'请选择年份'" :date-value="form.years" @update:dateValue="getTime" />
            <customPopCheckbox
              :list="selectOptionAll['安全-专家属性类别']"
              :check-value.sync="form.expertAttribute"
              title="属性类别"
            />
            <customPopCheckbox
              :list="selectOptionAll['安全专家库-专业类别']"
              :check-value.sync="form.professionType"
              title="专业类别"
            />
            <customPopCheckbox
              :list="selectOptionAll['专家聘任状态']"
              :check-value.sync="form.employState"
              title="受聘状态"
            />
            <customPopCheckbox :list="selectOptionAll['性别']" :check-value.sync="form.sex" title="性别" />
            <customPopCheckbox :list="selectOptionAll['安全人员管理-职称']" :check-value.sync="form.jobTitle" title="职称" />
          </template>
          <template v-else-if="active === '安全管理人员'">
            <!--<div class="customPopCheckbox">
              <div class="checkbox-title">姓名</div>
              <el-input v-model="form.managerName" placeholder="请输入管理人员姓名" size="small" style="margin-bottom: 10px" />
            </div>-->
            <!-- <customPopCheckbox :list="selectOptionAll['性别']" :check-value.sync="form.sex" title="性别" />
            <customPopCheckbox :list="selectOptionAll['文化程度']" :check-value.sync="form.educationLevel" title="学历" /> -->
            <customPopCheckbox
              :list="selectOptionAll['人员管理-专职/兼职']"
              :check-value.sync="form.partFull"
              title="专职/兼职"
            />
            <customPopCheckbox
              :list="selectOptionAll['安全-是否取得注册安全工程师证书']"
              :check-value.sync="form.isSafetyCertify"
              title="注册安全工程师证书"
            />
            <customPopCheckbox
              :list="selectOptionAll['是否专家']"
              :check-value.sync="form.isExpert"
              title="是否加入专家库"
            />
            <!-- <customPopCheckbox :list="selectOptionAll['安全人员管理-职称']" :check-value.sync="form.jobTitle" title="职称" /> -->
          </template>
          <template v-else-if="active === '特种作业人员'">
            <!--<div class="customPopCheckbox">
              <div class="checkbox-title">姓名</div>
              <el-input v-model="form.managerName" placeholder="请输入管理人员姓名" size="small" style="margin-bottom: 10px" />
            </div>-->
            <!-- <customPopCheckbox :list="selectOptionAll['性别']" :check-value.sync="form.sex" title="性别" />
            <customPopCheckbox :list="selectOptionAll['文化程度']" :check-value.sync="form.educationLevel" title="学历" /> -->
            <customPopCheckbox
              :list="selectOptionAll['安全-特种作业人员-作业类别']"
              :check-value.sync="form.jobCategory"
              title="作业类别"
            />
          </template>
          <template v-else-if="active === '特种设备作业/管理人员'">
            <!--<div class="customPopCheckbox">
              <div class="checkbox-title">姓名</div>
              <el-input v-model="form.managerName" placeholder="请输入管理人员姓名" size="small" style="margin-bottom: 10px" />
            </div>-->
            <!-- <customPopCheckbox :list="selectOptionAll['性别']" :check-value.sync="form.sex" title="性别" />
            <customPopCheckbox :list="selectOptionAll['文化程度']" :check-value.sync="form.educationLevel" title="学历" /> -->
            <customPopCheckbox
              :list="selectOptionAll['安全-作业/管理人员']"
              :check-value.sync="form.managerType"
              title="人员类别"
            />
            <customPopCheckbox
              :list="jobCategoryList"
              :check-value.sync="form.jobOperationItems"
              title="作业项目"
            />
          </template>
          <template v-else-if="active === '涉火作业人员'" />
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { ExpertList, ManagerList } from '@/api/commonPage/personnel'
import { currentTime } from '@/utils/dayJs'

export default {
  mixins: [commonList],
  data() {
    return {
      active: '安全管理人员',
      activeIndex: 0,
      form: {
        sex: '',
        jobTitle: '',
        pageNum: 1,
        pageSize: 10,
        jobOperationItems: '',
        companyName: '',
        professionType: '',
        companyId: '-1',
        years: currentTime('年'),
        securityIndustryType: '安全管理'
      },
      jobCategoryList: [
        {
          'value': '电梯作业',
          'label': '电梯作业',
          'text': '电梯作业'
        },
        {
          'value': '安全附件检查作业',
          'label': '安全附件检查作业',
          'text': '安全附件检查作业'
        },
        {
          'value': '特种设备安全管理',
          'label': '特种设备安全管理',
          'text': '特种设备安全管理'
        },
        {
          'value': '锅炉作业',
          'label': '锅炉作业',
          'text': '锅炉作业'
        },
        {
          'value': '压力容器作业',
          'label': '压力容器作业',
          'text': '压力容器作业'
        },
        {
          'value': '起重机作业',
          'label': '起重机作业',
          'text': '起重机作业'
        },
        {
          'value': '气瓶作业',
          'label': '气瓶作业',
          'text': '气瓶作业'
        },
        {
          'value': '场（厂）内专用机动车辆作业',
          'label': '场（厂）内专用机动车辆作业',
          'text': '场（厂）内专用机动车辆作业'
        },
        {
          'value': '其他',
          'label': '其他',
          'text': '其他'
        }
      ],
      list: [
        {
          label: '安全管理人员',
          listFun: ManagerList
        },
        {
          label: '专家库',
          listFun: ExpertList
        },
        {
          label: '特种作业人员',
          listFun: ManagerList
        },
        {
          label: '特种设备作业/管理人员',
          listFun: ManagerList
        },
        {
          label: '涉火作业人员',
          listFun: ManagerList
        }
      ],
      current: '',
      currentListFun: ManagerList,
      listData: []
    }
  },
  created() {
    this.initTag()
  },
  mounted() {
    console.log(this.$route.query)
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
  },
  methods: {
    initTag() {
      const { current, active } = this.$route.query
      current ? (this.current = current) : ''
      active ? (this.active = active) : ''
      if (active) {
        const checkValueIndex = this.list.findIndex(
          (val) => val.label === active
        )
        this.activeIndex = checkValueIndex
        this.form.securityIndustryType = this.active.replaceAll('人员', '')
        this.currentListFun = this.list.find(
          (val) => val.label === active
        ).listFun
      }
    },
    tagChange(tagArg) {
      const { label, listFun } = tagArg.item
      this.active = label
      this.currentListFun = listFun
      this.resetSuperSearch()
      this.listData = []
      this.form.securityIndustryType = this.active.replaceAll('人员', '')
      this.companyList(true)
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      if (this.active === '专家库') {
        this.form.userName = value
        this.form.managerName = ''
      } else {
        this.form.managerName = value
        this.form.userName = ''
      }

      // this.form.userName = this.form.managerName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType =
        args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      Object.keys(this.form).forEach((val) => {
        this.form[val] = ''
      })
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.pageSize = 10
      this.form.pageNum = 1
      this.form.years = new Date().getFullYear() + ''
      this.form.companyId = '-1'
      this.form.securityIndustryType = this.active.replaceAll('人员', '')
    },
    // 跳转详情
    goToDetails(item) {
      const { expertId, managerId } = item
      this.$router.push({
        path: '/staging/personnelDetails',
        query: {
          id: expertId || managerId,
          current: this.current,
          active: this.active
        }
      })
    },
    getTime(val) {
      this.form.years = val
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    async companyList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const { status, data } = await this.currentListFun(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = flag ? data.list : this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.customPopCheckbox {
  border-bottom: 1px solid rgba(233, 233, 233, 1);
  padding-bottom: 10px;
  margin-bottom: 30px;
  .checkbox-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
  }
}
</style>
